<template>
	<view class="layout">
		<cu-custom bgColor="bg-white">
			<block slot="content">登录</block>
		</cu-custom>
		<view class="nav">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in 4">
					<image src="../../static/icon3.png" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 输入框 -->
		<view class="center-box">
			<view class="index_e_c">
				<view :class="['index_e_c_a', { 'index_e_c_a_li': curriculum_type==2 }]"
					@click="curriculum_type_click(1)">
					手机号验证
					<view class="index_e_c_a_a" v-if="curriculum_type==1"></view>
				</view>
				<view :class="['index_e_c_a', { 'index_e_c_a_li': curriculum_type==1 }]"
					@click="curriculum_type_click(2)">
					账号密码登录
					<view class="index_e_c_a_a" v-if="curriculum_type==2"></view>
				</view>
			</view>
			<!-- 输入 -->
			<view class="content">
				<!-- 单行 -->
				<view class="niconamebox" v-if="curriculum_type==1">
					<!-- 左边 -->
					<input type="tel" class="nicoinput" placeholder="请输入您的手机号" v-model="information.nickname" />
				</view>

				<view class="niconamebox" v-if="curriculum_type==1">
					<!-- 左边 -->
					<input type="text" class="nicoinput" placeholder="请输入您的验证码" v-model="information.mobile" />
					<view class="u-demo-block__content">
						<u-code ref="uCode2" @change="codeChange2" keep-running start-text="发送验证码"></u-code>
						<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
					</view>
				</view>
				<!-- 下面的小子 -->
				<view class="zizizi" v-if="curriculum_type==1">
					未注册的手机号登录成功后默认为平台用户
				</view>
				
				
				<!-- 点击密码登录时 -->
				<view class="niconamebox" v-if="curriculum_type==2">
					<!-- 左边 -->
					<input type="tel" class="nicoinput" placeholder="请输入您的手机号" v-model="information.nickname" />
				</view>
				
				<view class="niconamebox" v-if="curriculum_type==2">
					<!-- 左边 -->
					<input type="text" class="nicoinput" placeholder="请输入您的密码" v-model="information.password" />
				</view>
				<view class="zizizi" v-if="curriculum_type==2">
					 
				</view>













				<!-- 登录 -->
				<view class="login-box">
					<view style="margin: 30rpx 0 0 20rpx;">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox activeColor="green" v-for="(item, index) in checkboxList1" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>

					<view class="wxlogin" >微信登录</view>

					<view class="newone" v-if="isWxlogin==false">
						登录/注册
					</view>
					<view class="newone" v-if="isWxlogin==true" @click="goToWxLogin()">
						微信登录
					</view>
				</view>

				<!-- tip -->
				<view class="tips">
					登录成功则默认为同意平台 <view class="tip" @click="navigate('/pages/noticeone/noticeone')">《服务协议》</view>
					与 <view class="tip" @click="navigate('/pages/noticeone/noticetwo')">《隐私条款》</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curriculum_type: 1,
				tips2: '',
				checkboxValue1: [],
				isWxlogin: false,
				// 基本案列数据
				checkboxList1: [{
					name: true,
					disabled: false
				}],
			}
		},
		methods: {
			curriculum_type_click(e) {
				this.curriculum_type = e;
			},
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				if (this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode2.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			checkboxChange(n) {
				console.log('change时', n);

				if (n[0] === true) {
					this.isWxlogin = n[0]
					console.log("得到的", this.isWxlogin)
				} else {
					this.isWxlogin = false
					console.log("为true时", this.isWxlogin)
				}
			},
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					// uni.showToast({
					// 	// title:'请先登录',
					// 	// icon:'error'
					// }).then
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/auth/wxrole'
							})
						},100)
					return;
				}
				uni.navigateTo({
					url
				});
			},
			goToWxLogin() {
				uni.navigateTo({
					url: '/pages/auth/wxrole'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		background: #f6f7fb;
		height: 100vh;

		.nav {
			width: 705rpx;
			margin: 33rpx 24rpx 0 21rpx;
			border-radius: 30rpx;
			// border: 1px solid red;
			// padding: 30rpx 0;

			swiper {
				width: 705rpx;
				height: 320rpx;
				// border-radius: 30rpx;

				swiper-item {
					width: 100%;
					height: 100%;
					// padding: 0 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}

		.center-box {
			width: 699rpx;
			height: 622rpx;
			background: #ffffff;
			margin: 38rpx 28rpx 0 23rpx;
			border-radius: 30rpx;
			// border: 1px solid red;

			.index_e_c {
				overflow: hidden;
				margin: auto;
				margin-top: 47rpx;
				width: 500rpx;

				.index_e_c_a {
					margin: 30rpx 0 0 0;
					width: 50%;
					float: left;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #FF4040;
					text-align: center;
					position: relative;

					&.index_e_c_a_li {
						color: #3D3D3D;
					}

					.index_e_c_a_a {
						width: 83rpx;
						height: 10rpx;
						background: #ff0000;
						border-radius: 5rpx;
						opacity: 0.2;
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -40rpx;
					}
				}
			}

			// 中间
			.content {
				width: 645rpx;
				height: 250rpx;
				line-height: 250rpx;
				background: #ffffff;
				// border: 1px solid red;
				margin: 50rpx 25rpx 0 29rpx;
				// padding: 50rpx 0;

				.niconamebox {
					width: 645rpx;
					height: 103rpx;
					// border: 1px solid green;
					display: flex;


					.u-page {

						// position: absolute;
						// right: 0;
						// margin: -70rpx 100rpx 0 0;
						// z-index: 1;
						&__code-text {
							color: $u-primary;
							font-size: 22rpx;
							width: 200rpx;
							margin: -70rpx 20rpx 0 0;
						}
					}

					.u-demo-block__content {
						@include flex;

					}


					.nicoinput {
						width: 645rpx;
						height: 103rpx;
						border-bottom: 1rpx solid #efefef;
						// margin: 0 0 0 100rpx;
						box-sizing: border-box;
						// color: #B9B9B9;
						// padding: 0 0 0 300rpx;
					}
				}

				.zizizi {
					width: 450rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #707070;
					font-size: 20rpx;
					font-family: Source Han Sans;
					margin-top: 20rpx;
				}

				.login-box {
					display: flex;
					width: 645rpx;
					height: 100rpx;
					// border: 1px solid red;
					margin: 30rpx 26rpx 0 0;

					.wxlogin {
						color: #1B9300;
						font-size: 22rpx;
						width: 110rpx;
						height: 40rpx;
						line-height: 40rpx;
						box-sizing: border-box;
						padding: 25rpx 0 0 10rpx;
					}

					.newone {
						width: 270rpx;
						height: 90rpx;
						line-height: 90rpx;
						background: #D8D8D8;
						margin: 0 0 0 20rpx;
						// border: 1px solid red;
						font-family: Source Han Sans;
						font-size: 30rpx;
						font-weight: 400;
						border-radius: 20rpx;
						box-sizing: border-box;
						padding: 0 0 0 70rpx;
						font-weight: normal;
					}

				}

				.tips {
					// width: ;
					width: 600rpx;
					height: 40rpx;
					// border: 1px solid red;
					line-height: 40rpx;
					font-size: 22rpx;
					display: flex;
					margin: 30rpx 0 0 20rpx;
					
					.tip {
						color: #FF4040;
					}

				}
			}
		}

	}
</style>